import React, {Component} from 'react';
import {
	AppRegistry,
	StyleSheet,
	Text,
	View,
    TouchableOpacity,
    StatusBar,
    Image
} from 'react-native';
import SideMenu from 'react-native-side-menu';
import Menu from './Menu.js';
import InputModule from './InputModule.js';
import MainPage from './MainPage.js';
import Chart from './Chart.js';
import Style from './Style.js';
import {StackNavigator} from 'react-navigation';  
const uri_image_menu = 'http://image18-c.poco.cn/mypoco/myphoto/20160605/09/17351665220160605093956066.png';
const Navigator = StackNavigator(  
 
    {  
        Main:{screen:MainPage},  
        InputModule:{screen:InputModule},
        Chart:{screen:Chart},
    },  
    
    {  
        navigationOptions:{  
        header:null,
        swipeEnabled:true,  
        animationEnabled:false,  
        gesturesEnabled:true,
    },  
    
        mode:'card',  
});
export default class App extends Component{
    constructor(props) {
		super(props);
        this.state = {
            isOpen: false,
            selectedItem: 'About',
            items:1,
        };
	}

    toggle() {
        this.setState({
            isOpen: !this.state.isOpen,
        });
    }

    updateMenuState(isOpen) {
    this.setState({isOpen: isOpen});
    }

    onMenuItemSelected = (item) => {
        this.setState({
        isOpen: true,
        selectedItem: item,
        items:2,
        });
    }

    render() {
        const menu = <Menu onItemSelected={this.onMenuItemSelected} navigator={navigator}/>;
        return(
            <View style={Style.Container}>
                <StatusBar
                    backgroundColor='#6570e3'   
                />
                <View style={Style.MainContainer}>
                    <Navigator style={styles.container}/>  
                </View>
            </View>
        );
    }
}

class Button extends Component {
    handlePress(e) {
        if (this.props.onPress) {
            this.props.onPress(e);
        }
    }

    render() {
        return (
            <TouchableOpacity
                onPress={this.handlePress.bind(this) }
                style={this.props.style}>
                <Text>{this.props.children}</Text>
            </TouchableOpacity>
        );
    }
}

const styles = StyleSheet.create({

    button: {
        position: 'absolute',
        top: 20,
        padding: 10,
    },

    caption: {
        fontSize: 20,
        fontWeight: 'bold',
        alignItems: 'center',
    },

    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },

    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },

    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});
